<template>
  <u-tabbar
    :zIndex="9999"
    :value="tabCurrent"
    :fixed="true"
    :placeholder="!props.immersiveBottom"
    :safeAreaInsetBottom="true"
    :activeColor="tabList[tabCurrent].text_select_color"
  >
    <u-tabbar-item
      v-for="(item, index) in tabList"
      :key="item.id"
      :text="item.text"
      @click="click(index)"
      :name="index"
      :customStyle="{
        opacity: 1
      }"
    >
      <template #active-icon>
        <view class="icon" :style="getStyle(item['select_icon_url'])">
          <image
            width="40rpx"
            height="40rpx"
            class="page__item__slot-icon"
            :src="item.select_icon_url"
          ></image>
        </view>
      </template>
      <template #inactive-icon>
        <view class="icon" :style="getStyle(item['icon_url'])">
          <image
            width="40rpx"
            height="40rpx"
            :src="item.icon_url"
            class="page__item__slot-icon"
            :fade-show="false"
          ></image>
        </view>
      </template>
    </u-tabbar-item>
  </u-tabbar>
</template>
<script setup>
import { getPagePath } from '@/libs/utils/sys'

const props = defineProps({
  isShowTabbar: {
    type: Boolean,
    default: false
  },
  // 隐藏底部导航占位符 沉浸式
  immersiveBottom: {
    type: Boolean,
    default: false
  }
})

const store = uni.$store('app')

const tabList = computed(() => {
  return store.tabList
})

// 回显状态
onShow(() => {
  nextTick(() => {
    if (props.isShowTabbar) {
      let index = tabList.value.findIndex((v) => getPagePath() === v.path_url)
      if (index !== -1) {
        store.setTabCurrent(index)
      }
    }
  })
})

const getStyle = (url) => {
  // #ifdef H5
  return { backgroundImage: `url(${url})` }
  // #endif

  // #ifndef H5
  return {}
  // #endif
}

const tabCurrent = computed(() => {
  return store.tabCurrent
})

const isClick = ref(true)

const click = (index) => {
  // 阻止相同的索引或者第二次点击触发
  if (index != tabCurrent.value && isClick.value) {
    isClick.value = false
    uni.$navTo(5, tabList.value[index].path_url, () => {
      store.setTabCurrent(index)
    })
    setTimeout(() => {
      isClick.value = true
    }, 300)
  }
}
</script>
<style lang="scss" scoped>
.icon {
  width: 40rpx;
  height: 40rpx;
  background-size: 100% 100%;
  background-position: 0% 0%;
  //   margin-bottom: 12rpx;
}
.page__item__slot-icon {
  width: 100%;
  height: 100%;
}
</style>
